<template>
  <div>
    <el-row style="margin-top: 40px">
      <el-col :span="12" :offset="6">
        <el-card shadow="always" class="box-card" style="height: 550px">
          <el-row style="margin-top: 20px">
            <el-col :span="5">
              <el-button
                size="small"
                type="primary"
                icon="el-icon-plus"
                plain
                round
                @click="addDialog=true">新的班级
              </el-button>
            </el-col>
            <el-col :span="6" :offset="13">
              <el-input
                placeholder="请输入班级名称"
                size="small"
                v-model="condition"
                suffix-icon="el-icon-search"
                @input="search"
                clearable>
              </el-input>
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-table
              :data="tableData"
              max-height="419"
              style="width: 100%">
              <el-table-column
                label="班级名称"
                header-align="center"
                align="center"
                width="180">
                <template slot-scope="scope">
                  <i class="el-icon-office-building"></i>
                  <span style="margin-left: 10px">{{ scope.row.className }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="班级人数"
                header-align="center"
                align="center"
                width="150">
                <template slot-scope="scope">
                  <i class="el-icon-user"></i>
                  <span style="margin-left: 10px">{{
                      scope.row.classNumber === null ? 0 : scope.row.classNumber
                    }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="创建时间"
                header-align="center"
                align="center"
                width="200">
                <template slot-scope="scope">
                  <i class="el-icon-time"></i>
                  <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
                </template>
              </el-table-column>
              <el-table-column
                header-align="center"
                align="center" label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="info"
                    size="mini"
                    icon="el-icon-edit"
                    plain
                    round
                    @click="handleEdit(scope.$index, scope.row)">编辑
                  </el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    icon="el-icon-delete"
                    plain
                    round
                    @click="handleDelete(scope.$index, scope.row)">删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
          <el-row style="margin-top: 30px">
            <el-pagination
              background
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              layout="total, prev,pager, next, jumper"
              :total="total"
              :page-size="limit">
            </el-pagination>
          </el-row>
        </el-card>

      </el-col>
    </el-row>

    <el-dialog
      title="新的班级"
      :visible.sync="addDialog"
      width="30%"
      center>
      <div>
        <el-form label-position="left" :rules="addRules" label-width="80px" ref="addForm" :model="addForm">
          <el-form-item label="班级名称">
            <el-input v-model="addForm.className"></el-input>
          </el-form-item>
          <el-form-item label="班级人数">
            <el-input v-model="addForm.classNumber"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addCancel">取 消</el-button>
        <el-button type="primary" @click="addClass">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="更改班级"
      :visible.sync="updateDialog"
      width="30%"
      center>
      <div>
        <el-form label-position="left" :rules="updateForm" label-width="80px" ref="updateForm" :model="updateForm">
          <el-form-item label="班级名称">
            <el-input v-model="updateForm.className"></el-input>
          </el-form-item>
          <el-form-item label="班级人数">
            <el-input v-model="updateForm.classNumber"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateCancel">取 消</el-button>
        <el-button type="primary" @click="updateClass">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Class',
  data () {
    return {
      currentPage: 1,
      limit: 6,
      total: 0,
      tableData: [],
      condition: '',
      addDialog: false,
      updateDialog: false,
      addForm: {
        className: '',
        classNumber: '',
      },
      addRules: {
        className: [
          {
            required: true,
            message: '请输入班级名称',
            trigger: 'blur'
          },
          {
            min: 4,
            max: 12,
            message: '长度在 4 到 12 个字符',
            trigger: 'blur'
          }
        ],
        classNumber: [
          {
            required: true,
            message: '请输入班级人数',
            trigger: 'blur'
          },
          {
            type: 'number',
            message: '班级人数必须为数字',
            trigger: 'blur'
          }
        ],
      },
      updateForm: {
        classId: '',
        className: '',
        classNumber: '',
      },
      updateRules: {
        className: [
          {
            required: true,
            message: '请输入班级名称',
            trigger: 'blur'
          },
          {
            min: 4,
            max: 12,
            message: '长度在 4 到 12 个字符',
            trigger: 'blur'
          }
        ],
        classNumber: [
          {
            required: true,
            message: '请输入班级人数',
            trigger: 'blur'
          },
          {
            type: 'number',
            message: '班级人数必须为数字',
            trigger: 'blur'
          }
        ],
      },
    }
  },
  methods: {
    handleEdit (index, row) {
      this.updateForm.classId = row.classId
      this.updateForm.className = row.className
      this.updateForm.classNumber = row.classNumber
      this.updateDialog = true
    },
    addCancel () {
      this.addForm = {
        className: '',
        classNumber: '',
      }
      this.addDialog = false
    },
    updateCancel () {
      this.updateForm = {
        classId: '',
        className: '',
        classNumber: '',
      }
      this.updateDialog = false
    },
    addClass () {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.$http({
            url: '/api/class/addOne',
            method: 'post',
            data: {
              className: this.addForm.className,
              classNumber: this.addForm.classNumber
            }
          }).then(res => {
            if (res.data.code === 2000) {
              this.$message({
                type: 'success',
                message: '成功添加新的班级！',
                center: true,
                duration: 1000
              })
              this.addDialog = false
              this.init()
            } else {
              //1.清空表单
              this.$refs.addForm.resetFields()
              //2.输出错误信息
              this.$message({
                type: 'warning',
                showClose: true,
                message: '添加失败，请重新尝试！',
                center: true,
              })
            }

          })
        } else {
          this.$message({
            message: '请填写正确的信息！',
            type: 'warning',
            duration: 100
          })
        }
      })

    },
    updateClass () {
      this.$refs.updateForm.validate((valid) => {
        if (valid) {
          this.$http({
            url: '/api/class/update',
            method: 'post',
            data: {
              classId: this.updateForm.classId,
              className: this.updateForm.className,
              classNumber: this.updateForm.classNumber
            }
          }).then(res => {
            if (res.data.code === 6062) {
              this.$message({
                type: 'success',
                message: '成功更新班级信息！',
                center: true,
                duration: 1000
              })
              this.updateDialog = false
              this.init()
            } else {
              //1.清空表单
              this.$refs.updateForm.resetFields()
              //2.输出错误信息
              this.$message({
                type: 'warning',
                showClose: true,
                message: '更新失败，请重新尝试！',
                center: true,
              })
            }
          })
        } else {
          this.$message({
            message: '请填写正确的信息！',
            type: 'warning',
            duration: 100
          })
        }
      })
    },
    handleDelete (index, row) {
      this.$http({
        url: '/api/class/del/' + row.classId,
        method: 'post'
      }).then(res => {
        if (res.data.code === 2000) {
          this.init()
          this.$message({
            type: 'success',
            message: '成功删除班级:' + row.className,
            duration: 1500,
          })
        } else {
          this.$message({
            type: 'error',
            message: '删除班级失败!',
            duration: 2000,
          })
        }
      })
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.init()
    },
    search () {
      this.init()
    },
    init () {
      this.$http({
        url: '/api/class/details',
        method: 'get',
        params: {
          condition: this.condition,
          page: this.currentPage,
          limit: this.limit
        },
      }).then(res => {
        this.total = res.data.result.total
        this.tableData = res.data.result.records
      })
    },
  },
  created () {
    this.init()
  }
}
</script>

<style scoped>

</style>
